<template>
  <view class="content">
    <!-- nav导航 -->
    <nav-bar class="nav-bar">
      <text slot="left" class="iconfont icon-fangdajing"></text>
      <view slot="center" class="nav-center">
        <text class="nav-item activeClass">推荐</text>
        <text class="nav-item" @click="toCity">同城</text>
      </view>
    </nav-bar>
    <!-- 视频列表 -->
    <video-list class="video-list" :videoList="videoList"></video-list>
    <!-- 底部tab -->
    <tab-bar currentIndex="0"></tab-bar>
  </view>
</template>

<script>
import VideoList from '../../components/content/index/VideoList.vue'
import request from '../../network/request.js'
export default {
  components: { VideoList },
  data() {
    return { videoList: [] }
  },
  onLoad() {
    this.getVideoList()
  },
  methods: {
    async getVideoList() {
      const res = await request('/video/group', { id: '1101' })
      this.videoList = res.datas
    },
    toCity() {
      uni.redirectTo({ url: '/pages/City/City' })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
}
.icon-fangdajing,
.icon-tuijian2 {
  font-size: 40rpx;
  color: gray;
}
.nav-center {
  display: flex;
  width: 55%;
  height: 100%;
  .nav-item {
    flex: 1;
    text-align: center;
    line-height: 64rpx;
    color: gray;
  }
}
.activeClass {
  color: #fff !important;
}
.nav-bar {
  position: fixed;
  top: 0;
  z-index: 100;
}
</style>
